<template>
  <div class="logistics">
    <div class="main">
      <div class="statistics">
        <ul>
          <li class="statistics_item">
            <div class="title">待揽件</div>
            <div class="num">11</div>
          </li>
          <li class="statistics_item">
            <div class="title">已揽件</div>
            <div class="num">22</div>
          </li>
          <li class="statistics_item">
            <div class="title">派送中</div>
            <div class="num">33</div>
          </li>
          <li class="statistics_item">
            <div class="title">已签收</div>
            <div class="num">44</div>
          </li>
          <li class="line"></li>
          <li class="statistics_item">
            <div class="title">系统生成物流</div>
            <div class="num">55</div>
          </li>
          <li class="statistics_item">
            <div class="title">手动输入物流</div>
            <div class="num">66</div>
          </li>
          <li class="line"></li>
          <li class="statistics_item">
            <div class="title">物流总数</div>
            <div class="num">77</div>
          </li>
        </ul>
      </div>
      <div class="divider_line"></div>
      <body class="body">
        <div class="header">
          <div class="update">
            <HPlainButton @click="update">更新物流状态</HPlainButton>
          </div>
          <div class="search">
            <el-select v-model="value1" placeholder="请选择" filterable clearable>
              <el-option v-for="(item, index) in options" :key="index" :value="item.value" />
            </el-select>
            <div class="date-range">
              <DateRange />
            </div>
            <el-select v-model="select" placeholder="选择" @change="onShowUpgrade">
              <el-option label="工单编号" value="1" />
              <el-option label="工单编号" value="2" />
              <el-option label="工单编号" value="3" />
            </el-select>
            <el-input
              v-model.trim="input"
              placeholder="检索"
              class="input-with-select"
              @keyup.enter="onShowUpgrade"
            />
            <h-button type="primary" @click="onShowUpgrade">
              <el-icon>
                <Search></Search>
              </el-icon>
              搜索
            </h-button>
          </div>
        </div>
        <div class="table">
          <el-table
            border
            stripe
            resizable
            :data="tableData"
            row-key="id"
            height="100%"
            @selection-change="handleChange"
          >
            <el-table-column type="selection" width="50" :align="'center'" fixed="left" />
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              width="60"
              :align="'center'"
              fixed="left"
            />
            <el-table-column show-overflow-tooltip prop="name" label="物流编号" width="200" />
            <el-table-column show-overflow-tooltip prop="date" label="物流单号" width="200" />
            <el-table-column show-overflow-tooltip prop="state" label="物流方式" width="120" />
            <el-table-column show-overflow-tooltip prop="city" label="出货单据" width="200" />
            <el-table-column show-overflow-tooltip prop="state" label="收货地址" min-width="400" />
            <el-table-column show-overflow-tooltip prop="address" label="更新时间" width="200" />
            <el-table-column show-overflow-tooltip prop="city" label="物流状态" width="120" />
            <el-table-column fixed="right" label="操作" width="115">
              <template #default="scope">
                <el-space :size="0" :spacer="spacer">
                  <HLink @click="trackLog()">跟踪物流</HLink>
                  <HLink @click="viewDetail()">查看</HLink>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <div class="print">
            <HPlainButton @click="onShowUpgrade">批量打印</HPlainButton>
          </div>
          <div class="pagination_container">
            <Pagination :list_total="11" />
            <!-- <HPlainButton @click="confirm">确定</HPlainButton> -->
          </div>
        </div>

        <!-- 物流详细信息弹窗 -->
        <h-dialog v-model="detailDialog" title="物流详细信息">
          <div class="info_list">
            <div class="info_item">
              <div class="label">物流公司:</div>
              <div class="value">顺丰速运【手动】</div>
            </div>
            <div class="info_item">
              <div class="label">物流单号:</div>
              <div class="value">SF0009</div>
            </div>
            <div class="info_item">
              <div class="label">物流状态:</div>
              <div class="value">
                <div class="text">已揽件</div>
                <HPlainButton @click="update">更新</HPlainButton>
              </div>
            </div>
            <div class="info_item">
              <div class="label">发货单据:</div>
            </div>
            <div class="info_item">
              <div class="label">发货时间:</div>
              <div class="value">2023-07-01 00:00:00</div>
            </div>
            <div class="info_item">
              <div class="label">发货地址:</div>
              <div class="value">admin 18088888888 广东省-中山市-东凤镇-详云路5档51号</div>
            </div>
            <div class="info_item">
              <div class="label">收货地址:</div>
              <div class="value">俊 15676899647 广西壮族自治区-北海市-银海区-银滩镇-测试地址</div>
            </div>
          </div>
        </h-dialog>

        <!-- 物流订单跟踪弹窗 -->
        <h-dialog v-model="trackDialog" title="物流订单跟踪">
          <div class="text">
            <div class="name">物流公司：顺丰速运</div>
            <div class="num">物流单号：SF0009</div>
          </div>
        </h-dialog>
      </body>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, h } from 'vue'
  import { ElMessageBox, ElMessage, ElDivider } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import DateRange from '@/components/DateRange.vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.storage.logisticsList,
  })

  const value1 = ref('')

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  const input = ref('')
  const select = ref('')
  const trackDialog = ref(false)
  const detailDialog = ref(false)

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  // 底部确认
  const confirm = () => {
    //
  }

  // 更新物流状态
  const update = () => {
    ElMessageBox.alert('更新成功', '提示', {
      confirmButtonText: '关闭',
      type: 'success',
      autofocus: false,
    })
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any[]) => {
    if (val.length != 0) {
      val.forEach((item: { name: any }) => {
        if (Object.values(selecttion.value).indexOf(item.name) == -1) {
          selecttion.value.push(item.name)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.name)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 批量打印
  const printAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请勾选需要打印的物流！',
        type: 'warning',
        duration: 5000,
        showClose: true,
        plain: true,
      })
      return
    }
  }

  // 查看
  const viewDetail = () => {
    detailDialog.value = true
  }

  // 跟踪物流
  const trackLog = () => {
    trackDialog.value = true
  }

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: 'LS23050905092127718284',
      name: 'ZGWXRD000000903',
      state: '订货散客 18088888888 广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom1',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom2',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom3',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom4',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom5',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom6',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom7',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom8',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]

  // 日期选择事件
  const onDatePicketChange = () => {
    const endTimeStamp = new Date(endDate.value).getTime()
    const startTimeStamp = new Date(startDate.value).getTime()
    if (startTimeStamp > endTimeStamp) {
      ElMessage({
        type: 'error',
        message: '结束日期不能小于开始日期',
        duration: 5000,
        showClose: true,
        plain: true,
      })
    }
  }

  const onShowUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待',
      duration: 5000,
      showClose: true,
      plain: true,
    })
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
